<template>
	<view class="pages">
		<!-- 使用TodoList组件 -->
		<todo-list 
			ref="todoList"
			:username="'卓君'"
			:userAvatar="'/static/底部导航栏/椭圆形@2x.png'"
			:initialItems="FormData"
			@items-change="handleItemsChange"
		/>
	</view>
</template>

<script>
	import TodoList from '@/components/TodoList/TodoList.vue';
	
	export default {
		components: {
			TodoList
		},
		data() {
			return {
				FormData: [{
						status: 0,
						userDate: '点击此处标题可展开详细信息',
						time: '',
						content: '点击此处标题可展开详细信息',
						option: 0,
						multiOption1: false,
						multiOption2: false
					},
					{
						status: 1,
						userDate: '右划可以快捷完成事项',
						time: '',
						content: '右划可以快捷完成事项',
						option: 1,
						multiOption1: true,
						multiOption2: false
					},
					{
						status: 0,
						userName: '左滑可以快速编辑该事项',
						time: '',
						content: '左滑可以快速编辑该事项',
						option: 0,
						multiOption1: false,
						multiOption2: false
					},
					{
						status: 0,
						userDate: '这里也可以展示时间',
						time: '上午9:30',
						content: '这里也可以展示时间',
						option: 0,
						multiOption1: false,
						multiOption2: false
					},
					{
						status: 0,
						userDate: '当然，这里也可以添加不同颜色标签',
						time: '',
						content: '当然，这里也可以添加不同颜色标签',
						option: 0,
						multiOption1: false,
						multiOption2: false
					},
					{
						status: 0,
						userDate: '点击这里GET更多技能吧',
						time: '',
						content: '点击这里GET更多技能吧',
						option: 0,
						multiOption1: false,
						multiOption2: false
					}
				],
				appReady: false
			}
		},
		onLoad() {
			// 减少不必要的延迟，避免多次数据同步
			this.appReady = true;
			// 一次性同步到全局
			this.syncToGlobal();
		},
		// 确保组件已完全挂载
		mounted() {
			// 组件挂载完成
			// 监听全局事件，用于其他页面触发添加事项弹窗
			uni.$on('openAddPopup', () => {
				// 通过ref调用子组件方法
				this.$refs.todoList && this.$refs.todoList.openAddPopup();
			});
			
			// 监听待办事项状态变更事件
			uni.$on('todoStatusChanged', (data) => {
				// 查找匹配的待办项并更新其状态
				const { index, status } = data;
				if (index >= 0 && index < this.FormData.length) {
					// 避免重复更新导致的循环调用
					if (this.FormData[index].status !== status) {
						this.FormData[index].status = status;
					}
				}
			});
			
			// 监听待办事项删除事件
			uni.$on('todoItemDeleted', (index) => {
				if (index >= 0 && index < this.FormData.length) {
					this.FormData.splice(index, 1);
				}
			});
			
			// 监听待办事项添加事件 - 防止重复添加
			uni.$on('todoItemAdded', (newItem) => {
				// 检查是否已经存在相同内容的项目，避免重复添加
				const exists = this.FormData.some(item => 
					(item.userDate === newItem.userDate || item.userName === newItem.userName) &&
					item.content === newItem.content
				);
				
				if (!exists) {
					this.FormData.unshift(newItem);
				}
			});
		},
		// 组件销毁前清除事件监听
		beforeDestroy() {
			uni.$off('openAddPopup');
			uni.$off('todoStatusChanged');
			uni.$off('todoItemDeleted');
			uni.$off('todoItemAdded');
		},
		// 监听tabBar点击事件
		onTabItemTap(e) {
			// 如果点击的是第一个tabBar项（索引为0）
			if (e.index === 0) {
				// 通过ref调用子组件方法打开左侧菜单
				this.$refs.todoList && this.$refs.todoList.openLeftMenu();
			}
			// 如果点击的是第二个tabBar项（索引为1）
			else if (e.index === 1) {
				// 通过ref调用子组件方法
				this.$refs.todoList && this.$refs.todoList.openAddPopup();
			}
			// 如果点击的是第三个tabBar项（索引为2）
			else if (e.index === 2) {
				// 通过ref调用子组件方法打开用户面板
				this.$refs.todoList && this.$refs.todoList.openUserPanel();
			}
		},
		methods: {
			// 处理TodoList组件的items-change事件
			handleItemsChange(items) {
				this.FormData = items;
				// 同步到全局数据
				this.syncToGlobal();
			},
			
			// 将数据同步到全局
			syncToGlobal() {
				const app = getApp();
				if (app && app.globalData) {
					// 减少不必要的深拷贝，检查确实需要更新时才更新
					if (JSON.stringify(app.globalData.todoItems) !== JSON.stringify(this.FormData)) {
						const cleanData = JSON.parse(JSON.stringify(this.FormData));
						app.globalData.todoItems = cleanData;
					}
				}
			}
		}
	}
</script>

<style>
	.pages {
		overflow: auto;
		width: 100%;
		height: 100vh;
		background-color: #fff;
	}
</style>